import React from 'react';
import { render } from 'react-dom';
// import App from './App.jsx'

// React中的组件 (两种)
// 函数式组件 ==> (展示视图)
// function App() {
//     return <div>
//         我是根组件
//     </div>
// }

// 类组件 ==> (处理逻辑操作)
// 通过map来进行循环列表
class App extends React.Component {
    // 管理内部数据
    constructor(props) {
        super(props);
        // Object.assign 对象合并
        this.state = {
            arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            count: 100,
            num: 888
        };
    }
    // state = {
    //     arr: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    // }

    add(k) {
        // this.state.count += 1
        // console.log(this.state.count)
        // 在react中修改数据用this.setState({}, callBack) ==> 会重新读取render函数
        this.setState({
            count: 200
        }, () => {
            console.log('修改成功');
        });
    }
    render() {
        console.log('我看看render有没有重新执行');
        const { arr, count, num } = this.state;
        return React.createElement(
            'div',
            null,
            React.createElement(
                'ul',
                null,
                arr.map((item, index) => {
                    return React.createElement(
                        'li',
                        { key: index },
                        item
                    );
                })
            ),
            React.createElement(
                'h3',
                null,
                count
            ),
            React.createElement(
                'button',
                { onClick: () => {
                        this.add('kkkk');
                    } },
                '+1'
            )
        );
    }
}

render(React.createElement(App, null), document.getElementById('root'), () => {
    console.log('渲染成功');
});
